import { Form } from "antd"
import { Dayjs } from "dayjs"
import { useMemo, useState } from "react"

import ComplexInput from "@/components/common/complexInput"
import { useLocale } from "@/locales"

import SeprateRange from "../timeRangePicker/seprateRangePicker"

const NewComplexBetTime = (props: any) => {
	const { newFormat } = useLocale()
	const form = Form.useFormInstance()
	const options = [
		{ label: newFormat({ id: "label.bet.createAt" }), value: 0 },
		{ label: newFormat({ id: "label.bet.checkAt" }), value: 1 }
	]
	const fieldsArr = [
		["createAtStart", "createAtEnd"],
		["netAtStart", "netAtEnd"],
		["reNetAtStart", "reNetAtEnd"]
	]
	if (props.isReset) options.push({ label: newFormat({ id: "label.bet.resetTime" }), value: 2 })
	const [field, setField] = useState<number>(0)
	const fieldsNow = useMemo(() => {
		return fieldsArr[field]
	}, [field])
	const changeAllFields = (e: [Dayjs | null, Dayjs | null] | null) => {
		form.setFieldValue("createAtStart", e?.[0]?.format("YYYY-MM-DD 00:00:00"))
		form.setFieldValue("netAtStart", e?.[0]?.format("YYYY-MM-DD 00:00:00"))
		form.setFieldValue("createAtEnd", e?.[1]?.format("YYYY-MM-DD 23:59:59"))
		form.setFieldValue("netAtEnd", e?.[1]?.format("YYYY-MM-DD 23:59:59"))
	}
	return (
		<ComplexInput options={options} value={field} onTypeChange={setField}>
			<SeprateRange fields={fieldsNow as [string, string]} onChange={changeAllFields} />
		</ComplexInput>
	)
}

export default NewComplexBetTime
